<template>
    <div class="invoice-list">
        <!-- 页面导航 -->
        <van-nav-bar title="发票列表" left-arrow @click-left="onClickLeft" />

        <van-row type="flex" justify="center">
            <van-button type="primary" @click="addInvoice">
                + 新增发票抬头</van-button
            >
        </van-row>

        <van-row
            class="invoice-item"
            type="flex"
            justify="space-between"
            align="center"
            v-for="item in list"
            :key="item.id"
        >
            <van-col span="16">
                <p>{{ item.name }}</p>
                <van-row>
                    <van-tag plain>{{ item.type }}</van-tag>
                    <van-tag plain v-if="item.is_default === '是'"
                        >默认</van-tag
                    >
                </van-row>
                <p v-if="item.type === '企业' || item.type === '非企业性单位'">
                    税号：{{ item.sh }}
                </p>
            </van-col>
            <van-col span="2">
                <van-icon name="arrow" />
            </van-col>
        </van-row>

        <!-- 没有发票内容的时候显示 -->
        <van-empty
            description="暂无发票，赶快添加吧"
            v-if="list.length === 0"
        />
    </div>
</template>

<script>
export default {
    mounted() {
        this.getList();
    },
    data() {
        return {
            list: [],
        };
    },
    methods: {
        onClickLeft() {
            console.log('点击返回按钮');
        },
        async getList() {
            const res = await this.$http.get('/invoices');
            console.log('res', res);
            this.list = res.data;
        },
        addInvoice() {
            this.$router.push('/invoice/add');
        },
    },
};
</script>

<style lang="less" scoped>
.invoice-list {
    background-color: #f7f5f8;
    min-height: 100vh;
}

.van-button {
    width: 95%;
    margin-top: 10px;
}

p {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
}

.van-tag {
    margin-right: 5px;
}

.invoice-item {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
}
</style>
